.p-literacy {

    outline: 1px dashed;
    display: flex;
    flex-direction: column;

    h1 {
        text-align: center;
    }

    .layout {
        display: flex;
        gap: 16px;
        padding: 16px;
        flex: 1;

        .l,
        .r {
            flex: 1;
            flex-shrink: 0;
            background-color: rgba(0, 0, 0, .15);
            padding: 16px;
        }

        .l {
            flex-basis: 38.2%;
            ul.btns {
                display: inline-flex;
                flex-wrap: wrap;
                display: inline-flex;
                flex-wrap: wrap;
                margin-bottom: 1.5rem;
                padding: .5rem;
                min-width: 100%;
                min-height: 9rem;
                border-radius: 1rem;
                background-color: rgba(0, 0, 0, .5);

                li.btn {
                    display: flex;
                    justify-content: center;
                    margin: 8px;
                    padding: 4px;
                    width: 48px;
                    height: 48px;
                    font-size: 24px;
                    color: #cccccc;
                    background: linear-gradient(225deg, #777, #999);
                    border: 4px solid #aaa;
                    border-radius: 50%;
                    cursor: pointer;

                    &.active {
                        border-color: #fff;
                        color: rgb(255, 255, 255);
                        background-color: darkgreen;
                        box-shadow: 0 0 8px 4px;
                        text-shadow: 0 0 2px #fff;
                    }

                    .i-dianTiKaiMen {
                        font-size: 28px;
                    }
                }
            }
            dl.guideMap{
                dt{
                margin-bottom: .25rem;
                    font-weight: bold;
                }
            }

        }

        .r {
            flex-basis: 61.8%;
            .mainHanZi {
                margin-bottom: 8px;
                padding: 8px;
                width: 60px;
                font-size: 48px;
                font-weight: bold;
                color: #fffe;
                background-color: #333;
                border-radius: 16px;

            }

            .zuCi {
                display: flex;
                position: relative;
                margin-bottom: 16px;
                height: 25rem;
                overflow: hidden;

                .literacyBox {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    visibility: hidden;
                    z-index: 1;

                    // 电梯盒子
                    .bg {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background: url(../../assets/img/电梯内部.jpg);
                        background-size: 100% 100%;
                        opacity: .95;
                        mask: linear-gradient(#fff 18%, transparent 18%, transparent 99.8%, #fff 99.8%),
                            linear-gradient(90deg, #fff 26%, transparent 26%, transparent 68%, #fff 68%);

                    }



                    .door {
                        position: absolute;
                        left: 25%;
                        top: 10%;
                        width: 44%;
                        height: 90%;
                        // background-color: rgba(149, 226, 104, 0.15);
                        overflow: hidden;

                        .left,
                        .right {
                            position: absolute;
                            display: inline-block;
                            width: 50%;
                            height: 100%;
                            background-color: rgba(126, 213, 255, .90);
                            border: #333 1px solid;

                            &::after {
                                position: absolute;
                                display: inline-block;
                                left: 50%;
                                top: 50%;
                                translate: -50% -50%;
                                content: '';
                                width: 4rem;
                                height: 4rem;
                                border-radius: 50%;
                                background-image: url(../../assets/img/窗花.jpg);
                                background-position: center;
                                background-size: cover;
                                background-repeat: no-repeat;

                            }
                        }

                        .right {
                            top: 0;
                            right: 0;
                            background-position-x: 40%;
                        }
                    }


                    @keyframes 电梯放大 {
                        from {
                            visibility: visible;
                            scale: 1;
                        }

                        to {
                            scale: 3;
                            visibility: hidden;
                        }
                    }

                    @keyframes 电梯缩小 {
                        from {
                            visibility: visible;
                            scale: 3;
                        }

                        to {
                            scale: 1;
                            visibility: visible;
                        }
                    }

                    @keyframes 场景放大 {
                        from {
                            top: -2.5rem;
                            scale: 0.44;
                            translate: -0.6rem;
                            opacity: .8;
                            // 模糊无动画效果
                            // filter: blur(0);
                        }

                        to {
                            scale: 1;
                            top: 0;
                            translate: 0;
                            opacity: 1;
                            // filter: blur(1px);
                        }
                    }

                    @keyframes 场景缩小 {
                        from {
                            scale: 1;
                            top: 0;
                            translate: 0;
                            opacity: 1;
                            // filter: blur(0);
                        }

                        to {
                            top: -2.5rem;
                            scale: 0.44;
                            translate: -0.6rem;
                            opacity: .8;
                            // filter: blur(1px);
                        }
                    }
                }

                &.into,
                &.closeDoor,
                &.openDoor,
                &.goout {
                    .literacyBox {
                        visibility: visible;
                    }
                }

                // 开关门和运行期间
                &.closeDoor,
                &.openDoor {
                    .scene {
                        top: -2.5rem;
                        scale: 0.44;
                        translate: -0.6rem;
                        opacity: .8;
                    }

                }

                // 进入前和出来后电梯门开着
                &.into,
                &.goout {
                    .door {
                        .left {
                            translate: -100%;
                        }

                        .right {
                            translate: 100%;
                        }
                    }
                }

                .scene {
                    position: relative;
                    display: flex;


                    .swiper-slide {
                        padding: 16px;
                        height: 100%;
                        min-width: 46rem;
                        background: linear-gradient(#eee, #bbb);

                        .ciYus {
                            display: inline-block;
                            margin-right: 4px;
                            margin-bottom: 8px;
                            padding: 2px 8px;
                            border-radius: 2px;
                            font-size: 22px;
                            letter-spacing: 1px;
                            color: #ffee00;
                            background-color: rgba(255, 0, 0, .63);
                            cursor: pointer;
                        }

                        .img {
                            height: 20rem;
                            background-position: center;
                            background-size: contain;
                            background-repeat: no-repeat;
                            background-color: #333;
                            border: 2px solid #333;
                        }
                    }
                }

                @keyframes 左电梯门开 {
                    to {
                        translate: -100%;
                    }
                }

                @keyframes 右电梯门开 {
                    to {
                        translate: 100%;
                    }
                }

                @keyframes 左电梯门关 {
                    from {
                        translate: -100%;
                    }

                    to {
                        translate: 0;
                    }
                }

                @keyframes 右电梯门关 {
                    from {
                        translate: 100%;
                    }

                    to {
                        translate: 0;
                    }
                }

                &.openDoor .literacyBox .door .left {
                    animation-name: 左电梯门开;
                    animation-fill-mode: forwards
                }

                &.openDoor .literacyBox .door .right {
                    animation-name: 右电梯门开;
                    animation-fill-mode: forwards
                }

                &.closeDoor .literacyBox .door .left {
                    animation-name: 左电梯门关;
                    animation-fill-mode: forwards
                }

                &.closeDoor .literacyBox .door .right {
                    animation-name: 右电梯门关;
                    animation-fill-mode: forwards
                }

                &.goout {
                    .literacyBox {
                        animation-name: 电梯放大;
                        animation-fill-mode: forwards
                    }

                    .scene {
                        animation-name: 场景放大;
                    }
                }

                &.into {
                    .literacyBox {
                        animation-name: 电梯缩小;
                        // animation-fill-mode: forwards
                    }

                    .scene {
                        animation-name: 场景缩小;
                        animation-fill-mode: forwards
                    }
                }

            }

            ul.voicer {
                display: flex;
                flex-wrap: wrap;

                &>li {
                    margin: 4px;
                    padding: 4px 8px;
                    border-radius: 4px;
                    background-color: rgba(255, 255, 255, .15);
                    cursor: pointer;

                    &.active {
                        background-color: blanchedalmond;
                    }

                }
            }
        }
    }

    &.jinMaoWan{
         .layout .l ul.btns li.btn{
            &.active{
                color: orange;
                border-color: orange;
                text-shadow: 0 0 0.125rem orange;
                box-shadow: 0 0 0.5rem 0.125rem;
            }
         }
    }
}